---
layout: single
property_name: mix-blend-mode
---

<section id="mix-blend-mode" class="property">
  <header class="property-header">
    <nav class="property-links">
      <a class="property-links-direct" href="{{site.url}}/property/mix-blend-mode/" data-property-name="mix-blend-mode" data-tooltip="Single page for this property">Permalink</a>
      <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="mix-blend-mode">Share</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/mix-blend-mode" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="property-name">
      <a href="#mix-blend-mode"><span>#</span>mix-blend-mode</a>
    </h2>
    <div class="property-description">
      <p>Defines how the element should <strong>blend</strong> with the background.</p>

    </div>

  </header>

    <style type="text/css">.mix-blend-mode { background: #310736;display: flex;padding: 1em; }</style>




    <section class="example">
      <header class="example-header">
        <p class="example-name">
            <code class="example-default" data-tooltip="This is the property's default value">default</code>


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: normal;">mix-blend-mode: normal;</code>
        </p>
        <div class="example-description">
          <p>The element does <strong>not</strong> blend.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div mix-blend-mode " id="mix-blend-mode-normal"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div>
        </div>
      </aside>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: multiply;">mix-blend-mode: multiply;</code>
        </p>
        <div class="example-description">
          <p>The element uses the <strong>multiply</strong> blend mode.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div mix-blend-mode " id="mix-blend-mode-multiply"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div>
        </div>
      </aside>
        <style type="text/css">#mix-blend-mode-multiply .block { mix-blend-mode: multiply; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: screen;">mix-blend-mode: screen;</code>
        </p>
        <div class="example-description">
          <p>The element uses the <strong>screen</strong> blend mode.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div mix-blend-mode " id="mix-blend-mode-screen"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div>
        </div>
      </aside>
        <style type="text/css">#mix-blend-mode-screen .block { mix-blend-mode: screen; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: overlay;">mix-blend-mode: overlay;</code>
        </p>
        <div class="example-description">
          <p>The element uses the <strong>overlay</strong> blend mode.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div mix-blend-mode " id="mix-blend-mode-overlay"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div>
        </div>
      </aside>
        <style type="text/css">#mix-blend-mode-overlay .block { mix-blend-mode: overlay; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: darken;">mix-blend-mode: darken;</code>
        </p>
        <div class="example-description">
          <p>The element uses the <strong>darken</strong> blend mode.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div mix-blend-mode " id="mix-blend-mode-darken"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div>
        </div>
      </aside>
        <style type="text/css">#mix-blend-mode-darken .block { mix-blend-mode: darken; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: lighten;">mix-blend-mode: lighten;</code>
        </p>
        <div class="example-description">
          <p>The element uses the <strong>lighten</strong> blend mode.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div mix-blend-mode " id="mix-blend-mode-lighten"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div>
        </div>
      </aside>
        <style type="text/css">#mix-blend-mode-lighten .block { mix-blend-mode: lighten; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: color-dodge;">mix-blend-mode: color-dodge;</code>
        </p>
        <div class="example-description">
          <p>The element uses the <strong>color-dodge</strong> blend mode.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div mix-blend-mode " id="mix-blend-mode-color-dodge"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div>
        </div>
      </aside>
        <style type="text/css">#mix-blend-mode-color-dodge .block { mix-blend-mode: color-dodge; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: color-burn;">mix-blend-mode: color-burn;</code>
        </p>
        <div class="example-description">
          <p>The element uses the <strong>color-burn</strong> blend mode.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div mix-blend-mode " id="mix-blend-mode-color-burn"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div>
        </div>
      </aside>
        <style type="text/css">#mix-blend-mode-color-burn .block { mix-blend-mode: color-burn; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: hard-light;">mix-blend-mode: hard-light;</code>
        </p>
        <div class="example-description">
          <p>The element uses the <strong>hard-light</strong> blend mode.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div mix-blend-mode " id="mix-blend-mode-hard-light"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div>
        </div>
      </aside>
        <style type="text/css">#mix-blend-mode-hard-light .block { mix-blend-mode: hard-light; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: soft-light;">mix-blend-mode: soft-light;</code>
        </p>
        <div class="example-description">
          <p>The element uses the <strong>soft-light</strong> blend mode.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div mix-blend-mode " id="mix-blend-mode-soft-light"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div>
        </div>
      </aside>
        <style type="text/css">#mix-blend-mode-soft-light .block { mix-blend-mode: soft-light; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: difference;">mix-blend-mode: difference;</code>
        </p>
        <div class="example-description">
          <p>The element uses the <strong>difference</strong> blend mode.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div mix-blend-mode " id="mix-blend-mode-difference"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div>
        </div>
      </aside>
        <style type="text/css">#mix-blend-mode-difference .block { mix-blend-mode: difference; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: exclusion;">mix-blend-mode: exclusion;</code>
        </p>
        <div class="example-description">
          <p>The element uses the <strong>exclusion</strong> blend mode.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div mix-blend-mode " id="mix-blend-mode-exclusion"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div>
        </div>
      </aside>
        <style type="text/css">#mix-blend-mode-exclusion .block { mix-blend-mode: exclusion; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: hue;">mix-blend-mode: hue;</code>
        </p>
        <div class="example-description">
          <p>The element uses the <strong>hue</strong> blend mode.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div mix-blend-mode " id="mix-blend-mode-hue"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div>
        </div>
      </aside>
        <style type="text/css">#mix-blend-mode-hue .block { mix-blend-mode: hue; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: saturation;">mix-blend-mode: saturation;</code>
        </p>
        <div class="example-description">
          <p>The element uses the <strong>saturation</strong> blend mode.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div mix-blend-mode " id="mix-blend-mode-saturation"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div>
        </div>
      </aside>
        <style type="text/css">#mix-blend-mode-saturation .block { mix-blend-mode: saturation; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: color;">mix-blend-mode: color;</code>
        </p>
        <div class="example-description">
          <p>The element uses the <strong>color</strong> blend mode.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div mix-blend-mode " id="mix-blend-mode-color"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div>
        </div>
      </aside>
        <style type="text/css">#mix-blend-mode-color .block { mix-blend-mode: color; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="mix-blend-mode: luminosity;">mix-blend-mode: luminosity;</code>
        </p>
        <div class="example-description">
          <p>The element uses the <strong>luminosity</strong> blend mode.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div mix-blend-mode " id="mix-blend-mode-luminosity"><p class="block block--alpha">Hello world</p><p class="block block--pink">Hello world</p><p class="block block--yellow">Hello world</p></div>
        </div>
      </aside>
        <style type="text/css">#mix-blend-mode-luminosity .block { mix-blend-mode: luminosity; }</style>
    </section>

</section>
